<template>
	<div>
		<el-row>
			<el-col :span="24" v-if="show">
				<span v-for="item in ownerTag1">
			        <el-button :type="item.type" size="mini" :disabled="item.disabled" v-on:click="clickTag(item)">
			        	{{item.label}}
			        </el-button>
			    &nbsp;
		        </span>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" v-if="show">
				<span v-for="item in ownerTag2">
			        <el-button :type="item.type" size="mini" :disabled="item.disabled" v-on:click="clickTag(item)">
				        {{item.label}}
			        </el-button>
			    &nbsp;
		        </span>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" v-if="show">
				<span v-for="item in ownerTag3">
			        <el-button :type="item.type" size="mini" :disabled="item.disabled" v-on:click="clickTag(item)">
				        {{item.label}}
			        </el-button>
			        &nbsp;
		        </span>
			</el-col>
		</el-row>
	</div>
</template>

<script>
export default {
  name: "tagList",
  componentName: "tagList",
  data: function() {
    return {
      show: true,
      ownerTag: [],
      ownerTag1: [],
      ownerTag2: [],
      ownerTag3: [],
      //concatForm: { userTag: [] },
      //checkTag: [],
      userTagCombo: [],
      userTagCombo1: [],
      userTagCombo2: [],
      userTagCombo3: []
    };
  },
  props: {
    checkTags: ""
  },
  methods: {
    //tag的初始化
    tagInit: function() {
      debugger;
      this.$data.show = false;
      //合并数组
      var lable = this.$data.userTagCombo1.concat(this.$data.userTagCombo2);
      lable = lable.concat(this.$data.userTagCombo3);
      this.$data.userTagCombo = lable;
      var click = this.checkTags;
      for (var i = 0; i < lable.length; i++) {
        lable[i].type = "text";
      }
      //用户已选标签
      for (var j = 0; j < click.length; j++) {
        for (var d = 0; d < lable.length; d++) {
          if (lable[d].value == click[j]) {
            lable[d].type = "primary";
          }
        }
      }
      //debugger;
      //				this.$data.ownerTag = lable;330
      //三个数组赋值
      //				for(var a = 0; a < this.$data.userTagCombo1.length; a++) {
      //					this.$data.ownerTag1[a] = lable[a];
      //				};
      //				for(var b = this.$data.userTagCombo1.length; b < (this.$data.userTagCombo1.length + this.$data.userTagCombo2.length); b++) {
      //					this.$data.ownerTag2[b] = lable[b];
      //				};
      //				for(var c = this.$data.userTagCombo1.length + this.$data.userTagCombo2.length; c < lable.length; c++) {
      //					this.$data.ownerTag3[c] = lable[c];
      //				};
      //拆分数组
      for (var a = 0; a < lable.length; a++) {
        if (a < this.$data.userTagCombo1.length) {
          this.$data.ownerTag1[a] = lable[a];
        }
        if (
          a >= this.$data.userTagCombo1.length &&
          a < this.$data.userTagCombo1.length + this.$data.userTagCombo2.length
        ) {
          this.$data.ownerTag2[a - this.$data.userTagCombo1.length] = lable[a];
        } else {
          this.$data.ownerTag3[
            a -
              (this.$data.userTagCombo1.length +
                this.$data.userTagCombo2.length)
          ] =
            lable[a];
        }
      }
      this.$data.show = true;
    },
    //点击标签
    clickTag: function(item) {
      this.$data.show = false;
      //debugger;
      if (item.type == "text") {
        item.type = "primary";
      } else {
        item.type = "text";
      }
      var checkT = [];
      for (var i = 0; i < this.$data.userTagCombo.length; i++) {
        if (this.$data.userTagCombo[i].type == "primary") {
          //	debugger;
          checkT.push(this.$data.userTagCombo[i].value);
          this.$emit("childTag", checkT);
        }
      }
      this.$data.show = true;
    },
    //查询用户标签下拉
    userTagCombos1: function() {
      this.$http
        .get(this.API_ROOT + "/base/dict/combo", {
          params: {
            group: "SHTX"
          }
        })
        .then(
          response => {
            // success callback
            debugger;
            this.$data.userTagCombo1 = response.data;
            this.tagInit();
          },
          response => {
            // error callback
          }
        );
    },
    //查询用户标签下拉
    userTagCombos2: function() {
      this.$http
        .get(this.API_ROOT + "/base/dict/combo", {
          params: {
            group: "XWTD"
          }
        })
        .then(
          response => {
            // success callback
            debugger;
            this.$data.userTagCombo2 = response.data;
            this.tagInit();
          },
          response => {
            // error callback
          }
        );
    },
    //查询用户标签下拉
    userTagCombos3: function() {
      this.$http
        .get(this.API_ROOT + "/base/dict/combo", {
          params: {
            group: "YWTX"
          }
        })
        .then(
          response => {
            // success callback
            debugger;
            this.$data.userTagCombo3 = response.data;
            this.tagInit();
          },
          response => {
            // error callback
          }
        );
    },
    //
    userTagCombos: function() {
      this.userTagCombos1();
      this.userTagCombos2();
      this.userTagCombos3();
    }
  },
  /******创建时运行*********/
  created: function() {
    //获取标签
    this.userTagCombos();
    //debugger;
    //alert("sdfdsf");
  }
};
</script>

<style scoped="scoped">
.el-button--text {
  background: #e4e8f1;
  border: 1px solid #ddd;
  padding: 4px 5px;
  color: #48576a;
  border-radius: 4px;
  font-size: 12px;
  box-sizing: border-box;
}

.el-button--primary {
  background: rgba(32, 160, 255, 0.1);
  color: #20a0ff;
  border: 1px solid rgba(32, 160, 255, 0.2);
  padding: 4px 5px;
}
</style>